import React, {useState} from 'react';
import s from './index.module.less';
import {useSelector} from "react-redux";
import {RootState} from "@/redux/store.ts";
import {Typography} from '@douyinfe/semi-ui';

const {Text, Title} = Typography;

interface StatisticProps extends React.HTMLProps<HTMLDivElement> {
    title: string
    value: number
    unit?: string
    colorIndex?: number
}

const Statistic = ({
                       title,
                       value, unit, style,
                       colorIndex, className
                   }: StatisticProps) => {

    const maxBaseSize = 240

    const defaultBaseSize = 160

    const {theme} = useSelector((state: RootState) => state.pub)

    const [fontSizeBase, setFontSizeBase] = useState(defaultBaseSize)

    return <div
        className={`${s.box} ${className || ""}`}
        style={{
            background: `var(--data-card-${theme}-${(colorIndex || 0) % 4 + 1})`,
            ...(style || {})
        }}
        ref={ref => {
            let baseSize = ref?.clientWidth || defaultBaseSize
            baseSize = baseSize > maxBaseSize ? maxBaseSize : baseSize // 限制最大字体基准
            setFontSizeBase(baseSize)
        }}
    >
        <div className={s.title}>
            <Title heading={6} style={{fontSize: fontSizeBase/15}}>{title}</Title>
        </div>
        <div className={s.value}>
            <Title className={s.number} style={{fontSize:fontSizeBase/5}} heading={1}>{value}</Title>
            {unit && <Text type="secondary" style={{fontSize: fontSizeBase/20}}>{unit}</Text>}
        </div>


    </div>
}

export default Statistic